<template>
	<view>
		<view class="body after-navber">
			<view class="flex-y-center flex-x-center"
				style="height: 100rpx; border-bottom: 1rpx solid #e3e3e3; border-top: 1rpx solid #e3e3e3; position: fixed; top: 0; width: 100%; z-index: 999; background: #efeff4">
				<navigator class="flex-y-center flex-x-center fs-sm"
					style="width: 700rpx; height: 60rpx; background: #fff; border: 1rpx solid #e3e3e3; border-radius: 10rpx; text-align: center; color: #b2b2b2"
					url="/pages2/shop/search/search">
					<image :src="__wxapp_img.search.search.url"
						style="width: 24rpx; height: 24rpx; margin-right: 10rpx"></image>
					<text>搜索</text>
				</navigator>
			</view>
			
			<view class="flex-row" style="height: 100%; padding-top: 100rpx">
				<view class="flex-grow-0" style="height: 100%; background: #fff">
					<scroll-view class="cat-list" :scrollY="true" style="height: 100%; width: 204rpx">
						<view @tap="catItemClick"
							:class="'cat-item ' + (item.active ? 'active' : '') + ' flex-y-center flex-x-center'"
							:data-index="index" v-for="(item, index) in cat_list" :key="item.id">
							<view class="cat-name">{{ item.name }}</view>
						</view>
					</scroll-view>
				</view>
				<view class="flex-grow-1" style="background: #f6dae1">
					<view
						style="position: fixed; top: 100rpx; left: 200rpx; bottom: 0; right: 0; z-index: 0; overflow: hidden">
						<scroll-view class="sub-cat-box cat-block-list" :scrollTop="sub_cat_list_scroll_top" 
							:scrollY="true" style="height: 100%; padding: 20rpx; " @scrolltolower="more">
							<view style="padding-bottom: 115rpx" v-if="store.cat_style == 2">
									<navigator class="cat-block flex-row" :url="'/pages/list/list?cat_id=' + item.id"
										v-for="(item, index) in current_cat.list" :key="item.id">
										<image :src="item.big_pic_url" style="width: 100%; height: 100%"></image>
									</navigator>
							</view>
							<view class="goods-list" :style="'padding-top:' + (height + 3) + 'px;padding-bottom:30rpx;'" v-if="store.cat_style == 5 ">
							
							    <navigator class="goods-item" openType="navigate" :url="'/pages2/shop/goods-detail/goods-detail?id=' + item.id" v-for="(item, index) in goods_list" :key="item.id">
							        <image class="goods-pic" mode="aspectFill" :src="item.image"></image>
							
							        <view class="goods-info" style="padding: 5rpx 20rpx">
							            <text class="mb-10 text-more-2" style="height: 2.8em; line-height: 1.4;font-size: 9pt;">{{ item.name }}</text>
							            <view class="flex-row">
							                <view class="flex-grow-1" style="color: #ff334b">
							                    <block >￥</block>
							                    {{ item.price }}
							                </view>
							              
							            </view>
							        </view>
							    </navigator>
								<view class="no-data-tip" v-if="!has_more">没有更多了~</view>
							</view>
							
							
						</scroll-view>
					</view>
				</view>
			</view>
			<view :class="'loading-bar ' + (show_loading_bar ? 'active' : '')" style="text-align: center">
				<image :src="__wxapp_img.system.loading.url" style="width: 160rpx; height: 80rpx"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {Index} from '../../../apirequest/index-model.js';
	var i = new Index();
	export default {
		data() {
			return {
				store: {
					cat_style: 5
				},
				current_cat: {
					list: [{
						big_pic_url: '/static/images/d0bbcaeebddde10a42fca2d024c105455d16367a.png'
					}, {
						big_pic_url: '/static/images/d0bbcaeebddde10a42fca2d024c105455d16367a.png'
					}]
				},
				cat_list:[],
				goods_list:[],
				has_more:true,
				page:1
				}
		},
		onLoad(options) {
			this._index();
		},
		methods: {
			_index(){
				var that = this;
				i.get_category_list({},(res) => {
					if(res.code == 1){
						that.cat_list = res.data
						if(that.cat_list.length > 0){
							that.cat_list[0].active = true;
							that.cid = that.cat_list[0].id
							that._getList();
						}
					}else{
						uni.showToast({
							title:'网络繁忙',
							icon:'none'
						})
					}
				})
			},
			_getList(){
				var that = this;
				if(!this.has_more){
					return false;
				}
				var cid = this.cid;
				var page = this.page;
				i.get_product_list({page:page,cid:cid},(res) => {
					if(res.code == 1){
						that.goods_list = that.goods_list.concat(res.data.data)
						that.has_more = res.data.has_more
						that.page = page+1
				
					}
				})
			},
			more(){
				this._getList();
			},
			catItemClick: function (t) {
				var a = t.currentTarget.dataset.index;
				var e = this.cat_list;
				var o = null;
				var that = this;
				for (var i in e) {
					if (i == a) {
						!(e[i].active = true);
						o = e[i];
						that.cid = o.id
					} else {
						e[i].active = false;
					}
				}
				this.cat_list=e
				that.goods_list = []
				that.has_more = true
				that.page = 1
				this._getList()
			},
		}
	}
</script>

<style>
	.cat-list {
		background: #f7f7f7;
	}

	.cat-list .cat-item {
		height: 74rpx;
		text-align: center;
		border-left: 8rpx solid transparent;
	}

	.cat-list .cat-item.active {
		background: #fff;
		color: #ff4544;
		border-left-color: #ff4544;
	}

	.cat-list .cat-item image {
		margin-right: 16rpx;
	}

	.cat-list .cat-item .cat-name {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.sub-cat-box {
		background: #fff;
	}

	.sub-cat-header {
		height: 106rpx;
		padding-left: 24rpx;
		margin-bottom: 0rpx;
		transition: background 200ms;
	}

	.sub-cat-header.active {
		background: rgba(255, 69, 68, 0.07);
	}

	.sub-cat-header>view {
		height: 100%;
	}

	.sub-cat-header navigator {
		height: 100%;
		padding: 0 24rpx;
	}

	.sub-cat-header navigator image {
		margin-left: 14rpx;
	}

	.sub-cat-list {
		flex-wrap: wrap;
	}

	.sub-cat-list .sub-cat-item {
		width: 33%;
		text-align: center;
		margin-bottom: 40rpx;
	}

	.sub-cat-list .sub-cat-item image {
		margin-bottom: 8rpx;
	}

	.sub-cat-list .sub-cat-item view {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.cat-block {
		height: 160rpx;
		background: #f7f7f7;
		margin-bottom: 20rpx;
	}

	.cat-block>.flex-grow-1 {
		padding: 32rpx;
	}

	.cat-block>.flex-grow-0 {
		padding: 0 20rpx 0 0;
	}

	.cat-block .cat-image {
		width: 128rpx;
		height: 128rpx;
	}

	.cat-block-list.big .cat-block {
		height: 360rpx;
	}

	.cat-block-list.big .cat-block>.flex-grow-1 {
		padding: 48rpx;
	}

	.cat-block-list.big .cat-block>.flex-grow-0 {
		padding: 0 32rpx 0 0;
	}

	.cat-block-list.big .cat-block .cat-image {
		width: 164rpx;
		height: 164rpx;
	}

	.cat-small-style {
		flex-wrap: wrap;
		padding-bottom: 115rpx;
	}

	.device_iphone_x~.after-navber .cat-small-style {
		padding-bottom: 165rpx;
	}

	.cat-small-style>.flex-grow-0 {
		text-align: center;
		margin: 40rpx 0;
	}

	.cat-small-style.cat-num-3>.flex-grow-0 {
		width: 33.333333%;
	}

	.cat-small-style.cat-num-4>.flex-grow-0 {
		width: 25%;
	}

	.cat-small-style .cat-item .cat-icon {
		width: 92rpx;
		height: 92rpx;
	}

	.cat-small-style .cat-item .cat-name {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding: 0 10rpx;
	}

	.advert {}

	.advert image {
		width: 500rpx;
		height: 184rpx;
	}

	.search-icon image {
		width: 68rpx;
		height: 68rpx;
	}

	.search-icon {
		height: 92rpx;
		padding: 0 24rpx;
	}

	.scroll-view-x {
		background-color: #fff;
		white-space: nowrap;
		top: 0;
		z-index: 9999;
		border-bottom: 1rpx solid #e2e2e2;
		height: 100rpx;
	}

	.scroll-view-x .scroll-view-item {
		display: inline-block;
		margin: 22rpx 17rpx 21rpx 17rpx;
		padding: 0rpx 26rpx;
		color: #666666;
		height: 58rpx;
		line-height: 58rpx;
		white-space: nowrap;
	}

	.scroll-view-y {
		border-top: 1px solid #cccccc;
		border-bottom: 1px solid #cccccc;
	}

	.scroll-view-x .active {
		color: #ffffff;
		border-radius: 29rpx;
		background-color: #ff4544;
		height: 58rpx;
	}

	.view-item1 {
		border: 1rpx solid #cccccc;
		color: #666666;
		height: 56rpx;
		margin: 24rpx 0rpx 0rpx 24rpx;
		border-radius: 28rpx;
		padding: 0rpx 20rpx;
	}

	.view-item2 {
		border: 1rpx solid #ff4544;
		color: #ff4544;
	}

	.goods-item {
		width: 249rpx;
		display: inline-block;
		position: relative;
		margin: 0 5rpx;
		margin-bottom: 10rpx;
		background: #fff;
	}

	.goods-item .goods-pic {
		width: 100%;
		height: 249rpx;
	}

	.goods-item .goods-info {
		padding: 5rpx 0;
	}

	.goods-item .goods-name {
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
		padding: 10rpx;
		display: block;
		text-align: center;
	}

	.goods-item .goods-price {
		color: #f40;
		display: block;
		text-align: center;
	}

	.loading-bar {
		visibility: hidden;
	}

	.loading-bar.active {
		visibility: visible;
	}
</style>
